<template>
  <div class="bg">
    <div class="main">
      <img class="img-item" src="../../../assets/science/1.0/2-assets/kexue_p2.png">
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="close">
      <slot name="close"></slot>
    </div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="cloud">
      <img class="img-item" src="../../../assets/science/1.0/2-assets/cloud.png">
    </div>
    <div class="one" v-on:click="show_content1">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/1.png">
    </div>
    <div class="two" v-on:click="show_content2">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/2.png">
    </div>
    <div class="three" v-on:click="show_content3">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/3.png">
    </div>
    <div class="four" v-on:click="show_content4">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/4.png">
    </div>
    <div class="five" v-on:click="show_content5">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/5.png">
    </div>
    <div class="six" v-on:click="show_content6">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/6.png">
    </div>
    <div class="seven" v-on:click="show_content7">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/7.png">
    </div>
    <div class="eight" v-on:click="show_content8">
      <img class="img-num" src="../../../assets/science/1.0/2-assets/8.png">
    </div>

    <div class="sciencecontent" v-show="content1">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0001.png">
        <div class="title-item">
          <slot name="title1-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0002.png">
        <div class="title-item">
          <slot name="title1-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0003.png">
        <div class="title-item">
          <slot name="title1-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title1-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content2">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0004.png">
        <div class="title-item">
          <slot name="title2-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0005.png">
        <div class="title-item">
          <slot name="title2-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title2-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0007.png">
        <div class="title-item">
          <slot name="title2-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content3">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0001.png">
        <div class="title-item">
          <slot name="title3-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0002.png">
        <div class="title-item">
          <slot name="title3-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0003.png">
        <div class="title-item">
          <slot name="title3-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title3-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content4">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0004.png">
        <div class="title-item">
          <slot name="title4-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0005.png">
        <div class="title-item">
          <slot name="title4-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title4-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0007.png">
        <div class="title-item">
          <slot name="title4-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content5">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0001.png">
        <div class="title-item">
          <slot name="title5-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0002.png">
        <div class="title-item">
          <slot name="title5-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0003.png">
        <div class="title-item">
          <slot name="title5-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title5-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content6">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0004.png">
        <div class="title-item">
          <slot name="title6-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0005.png">
        <div class="title-item">
          <slot name="title6-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title6-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0007.png">
        <div class="title-item">
          <slot name="title6-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content7">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0001.png">
        <div class="title-item">
          <slot name="title7-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0002.png">
        <div class="title-item">
          <slot name="title7-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0003.png">
        <div class="title-item">
          <slot name="title7-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title7-4"></slot>
        </div>
      </div>
    </div>

    <div class="sciencecontent" v-show="content8">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0004.png">
        <div class="title-item">
          <slot name="title8-1"></slot>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0005.png">
        <div class="title-item">
          <slot name="title8-2"></slot>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <slot name="title8-3"></slot>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0007.png">
        <div class="title-item">
          <slot name="title8-4"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      content1: false,
      content2: false,
      content3: false,
      content4: false,
      content5: false,
      content6: false,
      content7: false,
      content8: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    show_content1: function () {
      this.content1 = true
      this.content2 = false
      this.content3 = false
      this.content4 = false
      this.content5 = false
      this.content6 = false
      this.content7 = false
      this.content8 = false
    },
    show_content2: function () {
      this.content1 = false
      this.content2 = true
      this.content3 = false
      this.content4 = false
      this.content5 = false
      this.content6 = false
      this.content7 = false
      this.content8 = false
    },
    show_content3: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = true
      this.content4 = false
      this.content5 = false
      this.content6 = false
      this.content7 = false
      this.content8 = false
    },
    show_content4: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = false
      this.content4 = true
      this.content5 = false
      this.content6 = false
      this.content7 = false
      this.content8 = false
    },
    show_content5: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = false
      this.content4 = false
      this.content5 = true
      this.content6 = false
      this.content7 = false
      this.content8 = false
    },
    show_content6: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = false
      this.content4 = false
      this.content5 = false
      this.content6 = true
      this.content7 = false
      this.content8 = false
    },
    show_content7: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = false
      this.content4 = false
      this.content5 = false
      this.content6 = false
      this.content7 = true
      this.content8 = false
    },
    show_content8: function () {
      this.content1 = false
      this.content2 = false
      this.content3 = false
      this.content4 = false
      this.content5 = false
      this.content6 = false
      this.content7 = false
      this.content8 = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../../assets/science/1.0/2-assets/kexue_background2.png);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  margin:0 auto;
}
.main{
  width:1120px;
  height:410px;
  position: absolute;
  bottom:60px;
  left:60px;
  z-index: 20;
}
.img-item{
  width:100%;
  height:100%;
  position: absolute;
}
.img-num{
  margin-top:10%;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
a{
  height:100%;
  width:100%;
  color:black;
  text-decoration: none;
}
.content{
  position: absolute;
  width:90px;
  height:43px;
  top:15px;
  left:20px;
  cursor:pointer;
}
.close{
  position: absolute;
  width:50px;
  height:50px;
  right:55px;
  top:10px;
}
.title{
  position: absolute;
  width:520px;
  height:80px;
  top:50px;
  left:380px;
  text-align: center;
  font-size: 38px;
  letter-spacing: 5px;
  font-weight: 900;
}
.cloud{
  width:830px;
  height:320px;
  position: absolute;
  top:95px;
  left:195px;
  z-index: 10;
}
.one,.two,.three,.four,.five,.six,.seven,.eight{
  text-align: center;
  position: absolute;
  z-index: 20;
  cursor: pointer;
}
.one{
  width:65px;
  height:50px;
  left:190px;
  bottom:60px;
}
.two{
  width:90px;
  height:80px;
  left:310px;
  bottom:60px;
}
.three{
  width:50px;
  height:60px;
  left:600px;
  bottom:60px;
}
.four{
  width:50px;
  height:50px;
  right:550px;
  bottom:60px;
}
.five{
  width:50px;
  height:50px;
  right:510px;
  bottom:210px;
}
.six{
  width:50px;
  height:50px;
  right:350px;
  bottom:185px;
}
.seven{
  width:40px;
  height:50px;
  right:248px;
  bottom:210px;
}
.eight{
  width:60px;
  height:80px;
  right:248px;
  bottom:60px;
}
.sciencecontent{
  position: absolute;
  width:220px;
  height:200px;
  left:480px;
  top:120px;
  z-index: 20;
}
.title-img{
  width:32px;
  height:32px;
  float: left;
  margin-top:0px;
}
.title-item{
  width:150px;
  height:30px;
  font-size: 20px;
  font-weight: 800;
  float: right;
  margin-top:3px;
}
.title1,.title2,.title3,.title4{
  width:190px;
  height:30px;
  background-color: white;
  opacity: 0.8;
  border-radius:12px;
  margin-left:10px;
  margin-top:8px;
  border:2px solid darkgray;
  overflow:hidden;
}
</style>
